<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        姓：<input type="text" v-model="preName">
        <br>
        名：<input type="text" v-model="overName">
        <br>
        全名：{{ fullName }}
        <br>
        <input type="text" v-model="test">
    </div>
    <script src="../vuejs/vue.js"></script>
    <script>
        const vm = new Vue({
            el : '#app',
            data() {
                return {
                    preName : '',
                    overName : '',
                    test : ''
                }
            },
            // 计算属性：拿着属性加工计算后得到全新的属性
            computed:{
                // computed里做了缓存，只会读取一次
                // 而如果使用methods多次使用 就会重复调用 没有缓存浪费性能

                // get什么时候调用
                //      初次读取fullName时
                //      所依赖的数据发生变化时

                fullName:{
                    // get有什么作用 当有人读取fullName时 get就会被调用 且返回值就会作为fullName的值
                    get(){
                        console.log(this.test);
                        console.log("get被调用了");
                        // 此处的this是指vm
                        return this.preName + '-' + this.overName;
                    },
                    set(value){
                        // fullName被修改的时候被调用
                        // console.log("set被调用了",value);
                        const arr = value.split("-")
                        this.preName = arr[0]
                        this.overName = arr[1]
                    }

                    

                    
                },
                fullName2(){
// 只读不改可以简写
                }
            }
        })
    </script>
</body>
</html>